<template>
  <van-uploader class="z-uploader" :upload-icon="v_image_uploader"  :max-count="max">
      <template #preview-delete>
          <img class="z-uploader-del" :src="v_image_del" alt="SVG Icon" />
      </template>
  </van-uploader>
</template>
<script setup>
import v_image_del from '@/assets/svg/common/v_image_del.svg'
import v_image_uploader from '@/assets/svg/common/v_image_uploader.svg'

const props = defineProps({
    max: {
        type: Number,
        default: 999
    }
})

</script>
<style scoped lang="scss">
.z-uploader {

  &-del {
      display: block;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      position: absolute;
      top: -9px;
      right: -6px;
  }
  :deep(.van-uploader__preview) {
      margin-right: 12px;
      &:nth-child(3n) {  
          margin-right: 0;  
      }
  }
  :deep(.van-uploader__preview-image) {
      width: 101px;
      height: 101px;
      border-radius: 4px;
  }
  :deep(.van-uploader__upload) {
      width: 101px;
      height: 101px;
      border-radius: 4px;
      background: #383840;
      margin-right: 0;
  }
  :deep(.van-uploader__upload-icon) {
      font-size: 24px;
  }
}
</style>